<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Slide</title>
    <script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery.easing.js" type="text/javascript"></script>

    <link rel="stylesheet" href="../reset.css"/>
    <style type="text/css">
    body { padding: 20px;}

    .slide {  position: relative;   }
    .slide .slideWraper {   height: 570px;   overflow: hidden;    position: relative;    }
    .slide .slideWraper ul { position: absolute;     }

    /*-------- style ---------*/
    .slide { width: 400px; }
    .slide .slideWraper {  margin: 0 auto;}
    .slide  ul {     margin-top: -20px;     }
    .slide  ul li { width: 180px;  padding:10px;  height: 180px;  position: relative; float: left; }
    .slide .point {   display: block;     margin: 0 auto;   z-index: 2;   background: #faf;  }
    .slide .end{ opacity: .4; cursor: default;}
    /*-----------------*/
    .slide  ul li p { position: absolute;   bottom: 10px;    left: 0;  line-height: 30px;    height: 30px;
        background:#023;
        background: rgba(0, 0, 0, .5);
        width: 180px;
        color: #fff;
        z-index: 3;
    }

    .slide  ul li img {
        height: 180px;
        width: 180px;
    }

    a:hover {
        text-decoration: none;
    }
</style>

</head>

<body>

<div class="slide">
    <a class="point prev" href="#l">↑</a>


    <div class="slideWraper">
        <ul class="clearfix">
            <li >
                <img src="http://www.tx75.com/uploads/allimg/110612/153R4MI-18.jpg"/>

                <p>153R4MI-18.jpg</p>
            </li>
            <li >
                <img src="http://www.tx75.com/uploads/allimg/110612/153R41I4-16.jpg"/>

                <p>153R41I4-16.jpg</p>
            </li>
            <li >
                <img src="http://www.tx75.com/uploads/allimg/110612/153R413D-27.jpg"/>

                <p>153R413D-27.jpg</p>
            </li>

            <li >
                <img src="http://www.tx75.com/uploads/allimg/110612/153R41532-30.jpg"/>

                <p>153R41532-30.jpg</p>
            </li>
            <li >
                <img src="http://www.tx75.com/uploads/allimg/110612/153R46249-38.jpg"/>

                <p>153R46249-38.jpg</p>
            </li>


        </ul>

    </div>
    <a class="point next" href="#r">↓</a>

</div>




<script type="text/javascript">

(function($) {

    $.fn.SlideVer = function(options) {
        var opt = $.extend({}, $.fn.SlideVer.settings, options);
        return this.each(function() {
            var slide = new Slide($(this),opt);
                slide.init();
        });
    };
    function Slide(obj,options) {
        this.o=options;
        this.$slide=obj;
        this.$slideWraper=this.$slide.find(this.o.ele.slideWraper);
        this.$slideWrap=this.$slideWraper.find(this.o.ele.slideWrap);
        this.$slideList=this.$slideWraper.find(this.o.ele.slideList);
        this.$prev=this.$slide.find(this.o.ele.prev);
        this.$next=this.$slide.find(this.o.ele.next);
        this.slideListHeight = parseFloat(this.$slideList.outerHeight(true));
        this.listLen = Math.ceil(this.$slideList.length/this.o.lines);
        //上边可以有的数量
        this.prevNum = 0;
        this.nextNum = this.listLen - this.o.show;
        this.curmoveNum = this.o.moveNum;
        this.timer = 0;


    }
    Slide.prototype ={
        init:function(){
            var $slideWrap=this.$slideWrap;
            this.$slideWrap.css('top',0);
            if(!this.o.rounds) this.$prev.addClass('end');
            if(this.listLen<this.o.show){
                this.$next.addClass('end');
            }
            if(this.o.rounds){
                //添加UL
                $slideWrap=$slideWrap.add(this.$slideWrap.clone().css({
                    top:this.listLen * this.slideListHeight
                }).appendTo(this.$slideWraper));
                $slideWrap=$slideWrap.add(this.$slideWrap.clone().css({
                    top: -this.listLen * this.slideListHeight
                }).prependTo(this.$slideWraper));
                //改变可以有的数量
                this.prevNum += this.listLen;
                this.nextNum += this.listLen;

                this.$slideWrap=$slideWrap;

            }

            this._bindevent();
            if(this.o.auto){
                this.play(this.o.time);
            }
        },
        _bindevent:function(){
            var _this=this,
                speed=this.o.time,
                lasttime=new Date().getTime();
            this.$prev.unbind('click').bind('click',function(){
                var curtime=new Date().getTime();
                _this.o.time=curtime-lasttime<speed?curtime-lasttime:speed;
                _this.moveprev(_this.o.start,_this.o.end);
                lasttime=curtime;
                return false;
            });
            this.$next.unbind('click').bind('click',function(){
                var curtime=new Date().getTime();
                _this.o.time=curtime-lasttime<speed?curtime-lasttime:speed;
                _this.movenext(_this.o.start,_this.o.end);
                lasttime=curtime;
                return false;
            });
            this.$slide.bind('mouseover',function(){
                _this.stop();
            });
            this.$slide.bind('mouseout',function(){
                if(_this.o.auto){
                    _this.play(speed);
                }
            });

        },
        stop:function(){
            clearTimeout(this.timer);
        },
        play:function(speed){
            var _this=this;
            this.timer=setTimeout(function(){
                _this.o.time=speed;
                _this.movenext(_this.o.start,_this.o.end);
                _this.play(speed);
            },this.o.autoTime);
        },
        moveprev:function(start,end){
            var _this=this;

            //如果前一个没有了，
            if(this.prevNum<=0 || this.$slideWrap.is(':animated') ){ return;}

            start.call(_this);

            if(_this.o.rounds && _this.prevNum <= _this.o.moveNum){

                _this.$slideWrap=_this.$slideWrap.eq(2)
                       .css({
                           top: -(_this.prevNum + _this.listLen ) * _this.slideListHeight
                       })
                       .prependTo(_this.$slideWraper).add(_this.$slideWrap.slice(0,2));
                _this.prevNum += _this.listLen;
                _this.nextNum -= _this.listLen;


           }


            //判断移动几个？
            if(this.prevNum<this.o.moveNum){
                this.curmoveNum=this.prevNum;
            }else{
                this.curmoveNum=this.o.moveNum;
            }
            this.$slideWrap .stop(true,true)
                    .animate({top:'+='+this.slideListHeight*this.curmoveNum},this.o.time,this.o.easing,function(){
                        end.call(_this);
                    });
            _this.prevNum-=_this.curmoveNum;
            _this.nextNum+=_this.curmoveNum;


            if(_this.prevNum<=0){
                this.$prev.addClass('end');
            }
            this.$next.removeClass('end');

        },
        movenext:function(start,end){
            var _this=this;

            //如果下一个没有了
            if(this.nextNum<=0 ||  this.$slideWrap.is(':animated') ){ return;}
            start.call(_this);

            if(_this.o.rounds && _this.nextNum <= _this.o.moveNum){

                //处理选取的元素和dom节点，在适当的位置
                _this.$slideWrap=_this.$slideWrap.add(_this.$slideWrap.eq(0)
                       .css({
                           top: (_this.nextNum + _this.o.show  ) * _this.slideListHeight
                        })
                       .appendTo(_this.$slideWraper));
                _this.$slideWrap.slice(0,1);
                _this.nextNum += _this.listLen;
                _this.prevNum -= _this.listLen;

           }
            //判断移动几个？
            if(this.nextNum<this.o.moveNum){
                this.curmoveNum= this.nextNum;
            }else{
                this.curmoveNum=this.o.moveNum;
            }

           //移动
            this.$slideWrap.stop(true,true)
                    .animate({top:'-='+this.slideListHeight*this.curmoveNum},this.o.time,this.o.easing,function(){
                        end.call(_this);
                   });
            _this.nextNum-=_this.curmoveNum;
            _this.prevNum+=_this.curmoveNum;

            if(_this.nextNum<=0){
                this.$next.addClass('end');
            }
            this.$prev.removeClass('end');

        }


     };


    $.fn.SlideVer.settings = {
        ele:{
            slideWraper:'.slideWraper',
            slideWrap:'>ul',
            slideList:'>ul>li',
            prev:'.prev',
            next:'.next'
        },
        show:2,
        time:300,
        rounds:false,
        auto:false,
        moveNum:2,
        autoTime:1000,
        easing:"swing",
        lines:1,
        start:function() {
        },
        end:function() {
        }
    }

})(jQuery);
$('div.slide') .SlideVer({
    show:2,
    rounds:false,
    moveNum:1,
    lines:2,
    auto:false,
    easing:'easeInBack',
    time:500,
    autoTime:2000,
    vertically:true,
    start:function() {

        var $capt=this.$slide.find('p');
        if(!$capt.is(':animated'))
        $capt.animate({bottom:-20},250);
        return 250;
    },
    end:function() {
        var $capt=this.$slide.find('p');
        if(!$capt.is(':animated'))
        $capt.animate({bottom:10});
    }

});

</script>


</body>
</html>


